<template>
  <div>
    <van-sticky>
      <div class="redTltle">
        <van-row>
          <van-col span="2"
            ><van-icon name="arrow-left" @click="routerBack"
          /></van-col>
          <van-col span="5" offset="8"
            ><div class="redTltle">党刊资源</div></van-col
          >
        </van-row>
      </div>
      <!--    搜索框-->
      <div style="padding: 0.3rem 0.2rem; background-color: #efefef">
        <van-row>
          <van-col span="5" class="bgimg">
            <!--          <div>-->
            <!--            {{value}}-->
            <!--          </div>-->
            <van-field
              readonly
              clickable
              :value="value"
              :placeholder="columns[0].name"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                show-toolbar
                value-key="name"
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
              />
            </van-popup>
          </van-col>
          <van-col span="16">
            <van-cell-group>
              <van-field v-model="searchValue" placeholder="全部文献搜索" />
            </van-cell-group>
          </van-col>
          <van-col span="3">
            <div class="searchBtn" @click="searchBtn">搜索</div>
          </van-col>
        </van-row>
      </div>
      <!--    搜索框end-->
      <div class="seachListFlex">
        <div class="seachListFlextop1">找到{{ count }}条</div>
        <!--        <div  class="hav" :class='[havClass ? aactive : ""]' @click="havBtn(havClass)">-->
        <!--          相关度-->
        <!--        </div>-->
        <div class="seachListFlextop3">
          <van-dropdown-menu style="font-size: 0.3rem">
            <van-dropdown-item
              v-model="dateUpDown"
              :options="dateUpDownoption1"
              @change="changeDown"
            />
          </van-dropdown-menu>
        </div>
        <div class="seachListFlextop4" @click="showListbtn">
          <van-icon name="filter-o" />筛选
        </div>
      </div>
    </van-sticky>
    <div>
      <div
        class="ListBox"
        v-for="(item, index) in conten"
        @click="goRouteReadDownload(item)"
      >
        <div class="ListTitle">
          {{ item.title }}
        </div>
        <div class="ListName">
          <div>
            {{ item.author }}
          </div>
          <div class="jyao">
            {{ item.chinesePeriodicalTitle }}
          </div>
          <div>{{ item.year }}年{{ item.phase }}期</div>
        </div>
        <div class="ListText">
          {{ item.chineseSummary }}
        </div>
        <div class="downLoad">
          <div>被引：{{ item.citedFrequency }}</div>
          <div>下载：{{ item.downloadTimes }}</div>
        </div>
      </div>
    </div>
    <div class="all" @click="addList">加载更多</div>
    <van-popup
      closeable
      round
      v-model="showList"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="window-title1">筛选</div>
      <div class="window-title">资源来源</div>
      <div class="boxList">
        <div
          v-for="(item, index) in navTitle"
          :class="{ active: categoryIndex == index }"
          @click="clickcategory(index, item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="mdtextBox">
        <div class="boxTwo">
          <div @click="categoryIndex = 9">重置</div>
          <div @click="tureSearchbtn">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { complexSearchJournal } from "@/api/journalApi/resourcesListApi";
import { Toast } from "vant";
export default {
  name: "resourcesList",
  data() {
    return {
      hav: "hav",
      aactive: "isactive",
      havClass: false,
      showList: false,
      count: 0,
      conten: "",
      value: "主题", //下拉值
      searchValue: "", //输入值
      showPicker: false, //遮罩层
      navTitle: [
        {
          name: "理论研究",
          code: "X01,X08",
        },
        {
          name: "党史研究",
          code: "X02",
        },
        {
          name: "领导决策",
          code: "X06",
        },
        {
          name: "思想政治",
          code: "X05",
        },
        {
          name: "党员教育",
          code: "X03",
        },
        {
          name: "支部生活",
          code: "X04",
        },
      ],
      categoryIndex: 9,
      categoryItem: "",
      columns: [
        { name: "主题", code: "主题" },
        { name: "篇名", code: "篇名" },
        { name: "作者", code: "作者" },
        { name: "单位", code: "单位" },
        { name: "关键词", code: "关键词" },
        { name: "摘要", code: "摘要" },
        { name: "刊名", code: "刊名" },
        { name: "全文", code: "全文" },
      ],
      dateUpDown: 0, // 时间升降
      downloadUpDown: "a", //下载量
      dateUpDownoption1: [
        { text: "默认排序", value: 0 },
        { text: "时间升序", value: 1 },
        { text: "时间降序", value: 2 },
        { text: "下载量升序", value: 3 },
        { text: "下载量降序", value: 4 },
        { text: "相关度", value: 5 },
      ],
      parems: {
        orderBy: "",
        orderByValue: "",
        page: 1,
        pageSize: 20,
        searchType: "主题",
        searchValue: "",
        sortCodeList: [],
      },
      asdpage: 2,
      // downloadUpDownoption2: [
      //
      // ],
    };
  },
  created() {
    let list = {
      orderBy: "",
      orderByValue: "",
      page: 1,
      pageSize: 20,
      searchType: "",
      searchValue: "",
      sortCodeList: [],
    };
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    complexSearchJournal(list).then((res) => {
      console.log(res);
      this.conten = res.data.data.list;
      for (let i = 0; i < this.conten.length; i++) {
        if (this.conten[i].chineseSummary == "") {
          this.conten[i].chineseSummary = "暂无摘要";
        }
      }
      Toast({
        message: "加载完成",
        duration: 1000,
      });

      this.count = res.data.data.count;
    });
  },
  watch: {
    havClass: function (news, old) {
      //  console.log(news ,old)
      if (news) {
        this.parems.orderBy = "RELEVANT";
        this.parems.orderByValue = "";
        complexSearchJournal(this.parems).then((res) => {
          //  console.log(res)
          this.conten = res.data.data.list;
          for (let i = 0; i < this.conten.length; i++) {
            if (this.conten[i].chineseSummary == "") {
              this.conten[i].chineseSummary = "暂无摘要";
            }
          }
          this.count = res.data.data.count;
        });
      }
    },
  },
  methods: {
    havBtn(havClass) {
      if (this.havClass) {
        this.havClass = false;
      } else {
        this.havClass = true;
      }
    },
    clickcategory(index, item) {
      // 这里传入一个当前值
      this.categoryIndex = index;
      this.categoryItem = item;
    },
    //返回按钮
    routerBack() {
      this.$router.go(-1);
    },
    onConfirm(value) {
      //console.log(value)
      this.value = value.name;
      this.parems.searchType = value.name;
      this.showPicker = false;
    },
    //搜索按钮
    searchBtn() {
      //  console.log('搜索')
      this.parems.searchValue = this.searchValue;
      //console.log( this.parems)
      complexSearchJournal(this.parems).then((res) => {
        //  console.log(res)
        this.conten = res.data.data.list;
        for (let i = 0; i < this.conten.length; i++) {
          if (this.conten[i].chineseSummary == "") {
            this.conten[i].chineseSummary = "暂无摘要";
          }
        }
        Toast({
          message: "加载完成",
          duration: 1000,
        });
        this.count = res.data.data.count;
        this.showList = false;
        document.documentElement.scrollTop = 0;
      });
    },
    //下拉选择
    changeDown(val) {
      //console.log(val)
      if (val == 0) {
        this.parems.orderBy = "";
        this.parems.orderByValue = "";
      } else if (val == 1) {
        this.parems.orderBy = "发表时间";
        this.parems.orderByValue = "ASC";
      } else if (val == 2) {
        this.parems.orderBy = "发表时间";
        this.parems.orderByValue = "DESC";
      } else if (val == 3) {
        this.parems.orderBy = "下载频次";
        this.parems.orderByValue = "ASC";
      } else if (val == 4) {
        this.parems.orderBy = "下载频次";
        this.parems.orderByValue = "DESC";
      } else if (val == 5) {
        this.parems.orderBy = "RELEVANT";
        this.parems.orderByValue = "";
      }
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      complexSearchJournal(this.parems).then((res) => {
        // console.log(res)
        this.conten = res.data.data.list;
        for (let i = 0; i < this.conten.length; i++) {
          if (this.conten[i].chineseSummary == "") {
            this.conten[i].chineseSummary = "暂无摘要";
          }
        }
        Toast({
          message: "加载完成",
          duration: 1000,
        });

        this.count = res.data.data.count;
        document.documentElement.scrollTop = 0;
      });
    },
    //筛选按钮
    showListbtn() {
      this.showList = true;
    },
    addList() {
      let parem = {
        orderBy: this.parems.orderBy,
        orderByValue: this.parems.orderByValue,
        page: this.asdpage++,
        pageSize: 20,
        searchType: this.parems.searchType,
        searchValue: this.parems.searchValue,
        sortCodeList: this.parems.sortCodeList,
      };
      complexSearchJournal(parem).then((res) => {
        // console.log(res)
        // this.conten = res.data.data.list
        let arr = res.data.data.list;
        // this.conten.push(res.data.data.list)

        arr.forEach((item) => {
          this.conten.push(item);
        });
        // console.log(this.conten)
        for (let i = 0; i < this.conten.length; i++) {
          if (this.conten[i].chineseSummary == "") {
            this.conten[i].chineseSummary = "暂无摘要";
          }
        }
        Toast({
          message: "加载完成",
          duration: 1000,
        });

        this.count = res.data.data.count;
        // document.documentElement.scrollTop = 0;
      });
    },
    //筛选确认按钮
    tureSearchbtn() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      if (this.categoryIndex == 9) {
        this.parems.sortCodeList = [];
        //console.log(this.parems.sortCodeList)
      } else {
        this.parems.sortCodeList = [this.categoryItem.code];
      }
      complexSearchJournal(this.parems).then((res) => {
        // console.log(res)
        this.conten = res.data.data.list;
        for (let i = 0; i < this.conten.length; i++) {
          if (this.conten[i].chineseSummary == "") {
            this.conten[i].chineseSummary = "暂无摘要";
          }
        }
        Toast({
          message: "加载完成",
          duration: 1000,
        });
        this.count = res.data.data.count;
        this.showList = false;
        document.documentElement.scrollTop = 0;
      });
    },
    goRouteReadDownload(item) {
      this.$router.push({
        path: "/readDownload",
        query: {
          fileName: item.fileName,
          dataSource: item.dataSource,
          tableName: item.tableName,
          sysId: item.sysID,
        },
      });
      //this.$router.push({path: '/readDownload',query: {items: encodeURIComponent(JSON.stringify(item))}})
    },
  },
};
</script>

<style scoped>
.redTltle {
  /*width: 10rem;*/
  height: 1.15rem;
  background-color: #af2536;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  text-align: center;
  line-height: 1.15rem;
}

.bgimg {
  background-image: url("../../assets/label.png");
  background-size: 100% 100%;
  width: 2rem;
  height: 1.05rem;
  line-height: 44px;
  text-align: center;
  font-size: 0.293rem;
  /*background-color: #1b6d85;*/
  /*z-index: 999;*/
  /*padding: 10px 16px;*/
  /*border-right: 1px gray solid;*/
}
.searchBtn {
  background-color: #af2536;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  width: 1.2rem;
  height: 1.04rem;
  line-height: 1.04rem;
  text-align: center;
  background-color: #929292;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  opacity: 0.8;
}
.seachListFlex {
  width: 10rem;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  /*overflow: hidden;*/
  display: flex;
  background-color: white;
}
.seachListFlextop1 {
  width: 35%;
  height: 1.187rem;
  line-height: 1.187rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.293rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.8;
  text-align: center;
}
.hav {
  width: 2rem;
  height: 1.19rem;
  line-height: 1.3rem;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.8;
  text-align: center;
}
.seachListFlextop4 {
  width: 25%;
  height: 1.187rem;
  line-height: 1.3rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.8;
  text-align: center;
}
/deep/.seachListFlextop3 {
  width: 40%;
  /*height: 1.187rem;*/
  /*line-height: 1.187rem;*/
  font-family: PingFang-SC-Medium;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  /*opacity: 0.8;*/
  text-align: center;
}
/deep/.van-ellipsis {
  font-size: 0.347rem;
}
.ListBox {
  width: 94%;
  margin: 0 auto;
}
.ListTitle {
  margin: 0.453rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /*height: 0.427rem;*/
  font-family: PingFang-SC-Regular;
  font-size: 0.453rem;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
}
.ListName {
  display: flex;
}
.ListName > div {
  font-family: PingFang-SC-Regular;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #373737;
}
.jyao {
  margin: 0 0.4rem;
}
.ListText {
  width: 100%;
  height: 0.9rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #888888;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0.253rem 0;
}
.downLoad {
  display: flex;
  font-family: PingFang-SC-Regular;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #888888;
}
.downLoad > div {
  margin-right: 0.4rem;
}
.active {
  background-color: #af2536;
  color: #af2536;
  opacity: 1;
}
.isactive {
  /*background-color: #af2536;*/
  color: #af2536;
  opacity: 1;
}
.boxList {
  display: flex;
  flex-wrap: wrap;
}
.boxList > div {
  width: 4.52rem;
  height: 1.173rem;
  line-height: 1.173rem;
  font-size: 0.4rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  opacity: 0.9;
  text-align: center;
  background-color: #f3f3f3;
  border-radius: 0.053rem;
  border: solid 0.027rem #e5e5e5;
  margin: 0.2rem;
}
.window-title1 {
  margin-left: 46%;
  margin-top: 0.32rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.9;
}
.window-title {
  margin: 0.2rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.9;
}
.mdtextBox {
  width: 100%;
  height: 0.853rem;
  margin-top: 0.5rem;
}
.boxTwo {
  width: 3.63rem;
  height: 0.853rem;
  display: flex;
  margin: 0 auto;
  /*background-color: #af2536;*/
  /*border-radius: 0rem 0.4rem 0.4rem 0rem;*/
}
.boxTwo > div:first-child {
  width: 1.813rem;
  height: 0.853rem;
  line-height: 0.853rem;
  text-align: center;
  border-radius: 0.4rem 0rem 0rem 0.4rem;
  border: solid 0.013rem #af2536;
  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #af2536;
}

.boxTwo > div:last-child {
  width: 1.813rem;
  height: 0.853rem;
  line-height: 0.853rem;
  border: solid 0.013rem #af2536;
  text-align: center;
  background-color: #af2536;
  border-radius: 0rem 0.4rem 0.4rem 0rem;
  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #f0f0f0;
}
.all {
  margin-bottom: 2rem;
  width: 100%;
  text-align: center;
}
</style>